<template>
    <div>
        <van-nav-bar
        title="我的收藏"
        left-arrow
        @click-left="onClickLeft"
        />
    <van-tabs v-model:active="active">
    <van-tab title="演出">
        <show
            v-for="shou in shous"
            :key="shou.id"
            v-bind="shou"
        ></show>
    </van-tab>
    <van-tab title="周边">
        <merch
            v-for="shou in shous"
            :key="shou.id"
            v-bind="shou"
        ></merch>
    </van-tab>
    <van-tab title="众筹">
        <crfu
            v-for="shou in shous"
            :key="shou.id"
            v-bind="shou"
        ></crfu>
    </van-tab>
  
</van-tabs>
    </div>
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import show from '@/components/Shoushow.vue'
import merch from '@/components/Showmerch.vue'
import crfu from '@/components/Showcrfu.vue'
    export default {
        setup() {
            const onClickLeft = () => history.back();
              const active = ref(0);
                return {
                    onClickLeft,
                    active 
            };
        },
        components: {
            show,merch,crfu
        },
        data() {
            return {
                shous: [],
            }
        },
        created() {
            axios.get("http://localhost:8087/collection/selectAll").then((res)=>{
                this.shous = res.data.data;
                console.log(this.shous);
            })
        }
    };

</script>

<style lang="scss" scoped>

</style>